<template>
  <div>
    <div class="nav-bar">
      <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="goback()"
      />
    </div>
    <h4></h4>
    <div>
      <video :src=videoUrl controls width="100%" height="360px"></video>
    </div>
  </div>
</template>

<script>
import { getVideoUrlMethod } from '@/api/getVideoUrl'
export default {
  name: 'playVideo',
  data () {
    return {
      videoId: '',
      videoName: '',
      videoUrl: '',
      loading: false,
      loadingProgress: 0,
      errorMessage: ''
    }
  },
  created () {
    this.videoId = this.$route.params.id
  },
  mounted () {
    this.getUrl(this.videoId)
  },
  methods: {
    goback () {
      this.$router.back()
    },
    onError (event) {
      this.errorMessage = 'Error playing video.'
    },
    async getUrl (videoId) {
      const res = await getVideoUrlMethod(videoId)
      this.$store.commit('saveVideoUrl', res.data.address)
      this.videoUrl = this.$store.state.videoUrl
    }
  },
  beforeDestroy () {
    // 清理生成的URL，避免内存泄漏  http://192.168.121.221:8081/static/videos/dager/The Dangers In My Heart 01.mp4
    if (this.videoUrl) {
      URL.revokeObjectURL(this.videoUrl)
    }
  }

}
</script>

<style>
  h2{
    text-align: center;
  }
</style>

<!--
<template>
  <div>
    <div class="nav-bar">
      <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="goback()"
      />
    </div>
    <video v-if="videoUrl" controls width="100%" height="360px">
      <source :src="videoUrl" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
  </template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      videoBlob: null,
      videoUrl: null
    }
  },
  mounted () {
    this.downloadVideo()
  },
  methods: {
    goback () {
      this.$router.back()
    },
    async downloadVideo () {
      try {
        const response = await axios({
          method: 'get',
          url: 'http://192.168.121.221:8081/static/videos/dager/我心里危险的东西01.mp4', // 替换为后端提供的视频文件URL
          responseType: 'blob' // 告诉axios我们期望服务器返回一个blob对象
        })

        this.videoBlob = new Blob([response.data], { type: 'video/mp4' })
        this.videoUrl = URL.createObjectURL(this.videoBlob)

        // 如果需要在页面上直接播放视频，可以将videoUrl绑定到<video>标签的src属性上
      } catch (error) {
        console.error('Error downloading video:', error)
        // 处理错误，例如显示错误消息给用户
      }
    }
  }
}
</script>

  <style scoped>
  /* 添加你的样式 */
  </style> -->
